<template>
  <div class="x-btn-group-root">
    <div class="btn" v-for="btn in btns" :class="{selected: btn.value === selectedBtnValue}">
      <div class="label"><span>{{btn.name}}</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BtnGroup',

  props: {
    btns: {
      type: Array,
      default () {
        // return []
        return [
          {
            name: '按钮1',
            value: 1
          },
          {
            name: '按钮2',
            value: 2
          },
          {
            name: '按钮3',
            value: 3
          }
        ]
      }
    },
    selected: {
      type: Object,
      default () {
        return {}
      }
    }
  },

  computed: {
    selectedBtnValue () {
      return this.selected.value || (this.btns[0] && this.btns[0].value)
    }
  }
}
</script>

<style lang="stylus">

  .x-btn-group-root
    height 28px
    line-height 28px
    display inline-block
    .btn
      display inline-block
      background #333333
      color #666
      margin-right 1px
      text-align center
      cursor pointer
      &:hover
        background #3c3a3a
      &.selected
        background #434343
        color #fff
</style>
